﻿import React from "react";
import { Header } from "antd/es/layout/layout";
import { HighlightOutlined, UserOutlined } from "@ant-design/icons";
import { Avatar } from "antd";

function AppHeader(){
  return <Header 
  className="!bg-white border-b border-[#f1f1f1] flex items-center justify-between sticky top-0 z-10">
    <div className="flex items-center gap-2">
      {/* <RadarChartOutlined className="text-3xl" /> */}
      <HighlightOutlined className="text-3xl"/>
      <div>博客园</div>
    </div>
    <div className="flex items-center gap-2">
      <Avatar size={36} src="/yj.png" />
      <div>杨骏</div>
    </div>
  </Header>
}
export default AppHeader;



//  "use client"
// import React, { useState, useEffect } from "react";
// import { Header } from "antd/es/layout/layout";
// import { HighlightOutlined, UserOutlined } from "@ant-design/icons";
// import { Avatar } from "antd";
// import Cookies from 'js-cookie';

// function AppHeader() {
//   const [username, setUsername] = useState(null);

//   useEffect(() => {
//     const token = Cookies.get('token');
//     const usernameFromCookie = Cookies.get('username');
//     console.log("username", usernameFromCookie);
//     if (token && usernameFromCookie) {
//       setUsername(usernameFromCookie);
//     }
//   }, []);

//   return (
//     <Header className="!bg-white border-b border-[#f1f1f1] flex items-center justify-between sticky top-0 z-10">
//       <div className="flex items-center gap-2">
//         <HighlightOutlined className="text-3xl"/>
//         <div>博客园</div>
//       </div>
//       <div className="flex items-center gap-2">
//         <Avatar size={36} src="/yj.png" />
//         <div>{username ? username : '未登录'}</div>
//       </div>
//     </Header>
//   );
// }

// export default AppHeader;





